<template>
  <el-form
    v-loading="loading"
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm">
    <el-form-item label="接口类别" prop="parentId">
      <el-select v-model="ruleForm.parentId" placeholder="请选择" style="width: 320px"  @change="change" clearable>
        <el-option
          v-for="item in topList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="供应商" prop="supplierId">
      <el-select v-model="ruleForm.supplierId" placeholder="请选择" style="width: 320px">
        <el-option
          v-for="item in supplierList"
          :key="item.id"
          :label="item.supplierName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="接口名称" prop="name" v-if="ruleForm.parentId === null || ruleForm.parentId === '0' ">
      <el-input  v-model="ruleForm.name" ></el-input>
    </el-form-item>
    <el-form-item label="请求类型" prop="methodType">
      <el-select v-model="ruleForm.methodType"  clearable placeholder="请选择类型" style="width: 320px">
        <el-option
          v-for="item in methodType"
          :key="item.dictKey"
          :label="item.dictValue"
          :value="item.dictKey">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="URL" prop="url">
      <el-input  v-model="ruleForm.url" ></el-input>
    </el-form-item>
    <el-form-item label="bean名称" prop="url">
      <el-input  v-model="ruleForm.beanName" ></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select v-model="ruleForm.status" placeholder="请选择" style="width: 320px">
        <el-option
          label="启用"
          :value="1">
        </el-option>
        <el-option
          label="停用"
          :value="0">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input  v-model="ruleForm.remark" ></el-input>
    </el-form-item>
    <el-form-item style="margin-top: 40px;margin-left: -28px">
      <el-button type="primary" @click="submitForm('ruleForm')" style="width: 320px;height: 41px;">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: 'DataAdd',
  data(){
    return{
      ruleForm:{
        parentId:null,
        name:null
      },
      supplierList:[],
      loading:false,
      topList:[],
      methodType:[],
      rules:{
        name: [
          { required: true, message: '请输入接口名称', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
      }
    }
  },
  mounted () {
    this.getSupplierNameAndId();
    this.getDateDict()
    this.getTop()
  },
  methods:{
    //提交数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.parentId = this.ruleForm.parentId === null ? 0 :  this.ruleForm.parentId
          this.loading = true
          this.$http.post('/api/useApi',this.ruleForm).then(res => {
            this.loading = false
            ElMessage({
              type: 'success',
              showClose: true,
              message: res.data.message,
            })
            //触发事件
            this.$emit('tao')
          }).catch(() => this.loading = false)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //获得供应商名称和id集合
    getSupplierNameAndId(){
      this.$http.get('/api/useApiSupplier/nameAndId').then(res =>{
        this.supplierList = res.data.data
      })
    },
    //获取字典
    getDateDict(){
      this.$http.get('/api/dict/list?codeList='+ 'http_type').then(res =>{
        this.methodType = res.data.data.http_type
      })
    },
    //接口类别下拉框选中
    change(data){
      let filterElement = this.topList.filter(datas => datas.id = data)[0]
      this.ruleForm.name =  filterElement.name
    },
    //获取全部一级接口，即接口类别
    getTop(){
      this.$http.get('/api/useApi',{params:{
        'current':1, 'size':100,'parentId':0
        }}).then(res =>{
        this.topList = res.data.data.records
      })
    },
  }
}
</script>

<style scoped>

</style>
